<template>
	<view style="width: 100%;height: 100%;">
		<z-tabs ref="tabs" :list="tabs" :current="current" @change="tabsChange"></z-tabs>
		<swiper :current="current" class="swiper-box" :style="`height:${height}px`" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item v-for="(item ,index) in tabs" :key="index">
				<scroll-view scroll-y="true" style="height: 100%;" :scroll-with-animation = "true" @scrolltolower="scrolltolower">
					<slot :name="'content'+index"></slot>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
export default {
	props: {
		currentTab: {
			type: Number,
			default: 0
		},
		// 使用的tab
		tabType:{
			type:String,
			default:'u-tabs'
		},
		tabs: {
			type: Array,
			default: []
		},
		height:{
			type:Number,
			default:()=>{
				const {windowHeight,windowTop} = uni.getSystemInfoSync();
				return windowHeight-windowTop
			}
		}
	},
	data() {
		return {
			current: this.currentTab
		};
	},
	methods: {
		//tabs通知swiper切换
		tabsChange(index) {
			this.current = index;
		},
		//swiper滑动中
		swiperTransition(e) {
			this.$refs.tabs.setDx(e.detail.dx);
		},
		//swiper滑动结束
		swiperAnimationfinish(e) {
			this.current = e.detail.current;
			this.$emit('change', e.detail.current);
			this.$refs.tabs.unlockDx();
		},
		// 滚动到底部
		scrolltolower(e) {
			this.$emit('onReachBottom', this.current);
			console.log(this.current)
		}
	}
};
</script>

<style lang="scss" scoped>
	.swiper-box {
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: aquamarine;
	}
</style>

